<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }

      div {
        width: 300px;
        height: 300px;
        background-color: lightcoral;
        padding: 30px;
        border: 10px solid black;
        margin: 50px;

        /* box-sizing: content-box; */
        /* box-sizing: border-box; */
      }
    </style>
  </head>
  <body>
    <div>怪异盒模型</div>
  </body>
</html>

<!-- 
  box-sizing属性可以指定盒子模型种类
    content-box: 指定盒子模型为W3C（标准盒模型）
    border-box: 为IE盒子模型（怪异盒模型）

    box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
    box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。在这种解析模式下添加padding或者border不会再把盒子撑大


 -->
